<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts图表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <style>
        .echart-div{
            height: 500px;
            width: 500px;
            /* 水平垂直居中 */
            margin:  auto;
        }
        .echart-container{
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-main" style="width: 100%;">

    <div class="layui-row layui-col-space1">
        <div class="layui-col-md4">
            <!-- 模块名 -->
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">折线图</blockquote>
            <div class="echart-container" style="margin-top: 10px">
                <div class="echart-div" id="line"></div>
            </div>
        </div>
        <div class="layui-col-md4">
            <!-- 模块名 -->
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">柱状图</blockquote>
            <div class="echart-container" style="margin-top: 10px">
                <div class="echart-div" id="bar"></div>
            </div>
        </div>
        <div class="layui-col-md4">
            <!-- 模块名 -->
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">饼图</blockquote>
            <div class="echart-container" style="margin-top: 10px">
                <div class="echart-div" id="pie"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/plugins/echart/echarts.min.js}"></script>
<script>
    $(function () {
        ECHART.init();
    })

    /**
     * 图表
     */
    var ECHART = {
        init:()=>{
            ECHART.drawPie();
            ECHART.drawLine();
            ECHART.drawBar();
        },
        /**
         * 绘制折线图
         */
        drawLine: () => {
            var chartDom = document.getElementById('line');
            var myChart = echarts.init(chartDom);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };
            myChart.setOption(option);
        },
        /**
         * 绘制柱状图
         */
        drawBar: () =>{
            var chartDom = document.getElementById('bar');
            var myChart = echarts.init(chartDom);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        /**
         * 绘制饼图
         */
        drawPie: () => {
            var chartDom = document.getElementById('pie');
            var myChart = echarts.init(chartDom);
            let option = {
                title: {
                    text: '文章数据统计',
                    subtext: '统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: 'Search Engine'},
                            {value: 735, name: 'Direct'},
                            {value: 580, name: 'Email'},
                            {value: 484, name: 'Union Ads'},
                            {value: 300, name: 'Video Ads'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    }

</script>